<template>
    <div id="map" :style="y">
        
    </div>
</template>
<script>
    import echarts from 'echarts'
    import Axios from 'axios'
    // import './mapdata/china.js'
    export default {
        name:'vMap',
        props:['y'],
        components:{echarts},
        data(){
            return {
                option : {
                    tooltip: {
                        trigger: 'item'
                    },
                    visualMap: {
                        min: 0,
                        max: 2500,
                        color:['#45C9F4','#fff'],
                        // left: 'left',
                        range:[0,2500],
                        align:'left',
                        inverse:true,
                        orient:'horizontal',
                        text: ['高','低'],           // 文本，默认为数值文本
                        calculable: false
                    },
                    // toolbox: {
                    //     show: true,
                    //     orient: 'vertical',
                    //     left: 'right',
                    //     top: 'center',
                    //     feature: {
                    //         dataView: {readOnly: false},
                    //         restore: {},
                    //         saveAsImage: {}
                    //     }
                    // },
                    series: [
                        {
                            name: 'iphone3',
                            type: 'map',
                            mapType: 'china',
                            roam: false,
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            data:[
                                {name: '北京',value: 400 },
                                {name: '天津',value: 400 },
                                {name: '上海',value: 400 },
                                {name: '重庆',value: 400 },
                                {name: '河北',value: 400 },
                                {name: '河南',value: 400 },
                                {name: '云南',value: 400 },
                                {name: '辽宁',value: 400 },
                                {name: '黑龙江',value: 400 },
                                {name: '湖南',value: 400 },
                                {name: '安徽',value: 400 },
                                {name: '山东',value: 400 },
                                {name: '新疆',value: 400 },
                                {name: '江苏',value: 400 },
                                {name: '浙江',value: 400 },
                                {name: '江西',value: 400 },
                                {name: '湖北',value: 400 },
                                {name: '广西',value: 400 },
                                {name: '甘肃',value: 400 },
                                {name: '山西',value: 400 },
                                {name: '内蒙古',value: 400 },
                                {name: '陕西',value: 400 },
                                {name: '吉林',value: 400 },
                                {name: '福建',value: 400 },
                                {name: '贵州',value: 400 },
                                {name: '广东',value: 400 },
                                {name: '青海',value: 400 },
                                {name: '西藏',value: 400 },
                                {name: '四川',value: 400 },
                                {name: '宁夏',value: 400 },
                                {name: '海南',value: 400 },
                                {name: '台湾',value: 400 },
                                {name: '香港',value: 400 },
                                {name: '澳门',value: 400 }
                            ]
                        },
                        {
                            name: 'iphone4',
                            type: 'map',
                            mapType: 'china',
                            label: {
                                normal: {
                                    show: true
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            data:[
                                {name: '北京',value: 400 },
                                {name: '天津',value: 400 },
                                {name: '上海',value: 400 },
                                {name: '重庆',value: 400 },
                                {name: '河北',value: 400 },
                                {name: '安徽',value: 400 },
                                {name: '新疆',value: 400 },
                                {name: '浙江',value: 400 },
                                {name: '江西',value: 400 },
                                {name: '山西',value: 400 },
                                {name: '内蒙古',value: 400 },
                                {name: '吉林',value: 400 },
                                {name: '福建',value: 400 },
                                {name: '广东',value: 400 },
                                {name: '西藏',value: 400 },
                                {name: '四川',value: 400 },
                                {name: '宁夏',value: 400 },
                                {name: '香港',value: 400 },
                                {name: '澳门',value: 400 }
                            ]
                        },
                        {
                            name: 'iphone5',
                            type: 'map',
                            map: 'china',
                            label: {
                                normal: {
                                    show: true
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            data:[
                                {name: '北京',value: 200 },
                                {name: '天津',value: 200 },
                                {name: '上海',value: 200 },
                                {name: '广东',value: 200 },
                                {name: '台湾',value: 200 },
                                {name: '香港',value: 200 },
                                {name: '澳门',value: 200 }
                            ]
                        }
                    ]
                }
            }
        },
        methods:{
            randomData:function() {
                return Math.round(Math.random()*1000);
            }
        },
        mounted:function(){
            // var _this = this;
            Axios.get('/static/china.json').then((chinaJson)=>{
                echarts.registerMap('china',chinaJson.data)
                echarts.init(document.getElementById('map')).setOption(this.option)
            })
            //
            // this.$nextTick(()=>{
            //     echarts.init(document.getElementById("echarts")).setOption(this.option)
            // }) 
        }
        
    }
</script>
<style scoped>
    #map{border:1px solid red}
</style>
